<template>
  <div class="OrderDetails">
    <div class="demo-nav">
      <div class="demo-nav__title">商品详情</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="OrderDetails-demo" align="left">
      <van-cell is-link size="large"  @click="toAddress">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-tag type="danger">{{customerAddress != null ? '默认':''}}</van-tag>
          <span class="custom-title" style="font-size: 0.7rem;color: black">{{customerAddress != null ? customerAddress.province : "暂无配送地址"}}
                {{customerAddress != null ? customerAddress.city : ""}}  {{customerAddress != null ? customerAddress.county : ""}}</span>
          <br>
          <P style="font-size: 0.7rem">{{customerAddress != null ? customerAddress.addressDetail : ""}}</P>
          <P style="font-size: 0.7rem">{{customerAddress != null ? customerAddress.name : ""}}    {{customerAddress != null ? customerAddress.tel :""}}</P>
        </template>
      </van-cell>

      <div>
        <div v-for="item in resultList">
          <van-card
            :num="item.productNumber"
            :tag="item.shopsName"
            :price="item.labelPrice"
            :desc="item.labelName +' / '+ item.descript"
            :title="item.productName"
            :thumb="item.picUrl">
          </van-card>
          <van-checkbox-group v-model="result">
            <van-cell-group>
              <van-cell
                clickable
                title="开发票">
                <template #right-icon>
                  <van-checkbox name="item" ref="checkboxes" @click="toggle()" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
          <van-cell-group>
            <van-field v-model="orderPaper" v-show="orderPaperShow" label="抬头票" placeholder="请输入抬头票" />
          </van-cell-group>
          <van-cell title="商品金额" :value="'￥'+item.labelPrice"></van-cell>
          <van-cell title="运费" :value=" item.labelFreight == null ? 0 :' ￥' +item.labelFreight"></van-cell>
        </div>
        <van-submit-bar :price="this.totalPrice*100" button-text="提交订单" @submit="tiJiao()" />
      </div>

    </div>
  </div>
</template>

<script>
  import { selectCustomerAddrByCustomerId,selectCustomerCouponList } from '@/api/customer/customer.js'
  import { addOrder } from '@/api/commodity/shopping_cart.js'
  import { Toast } from "vant";
    export default {
      name: "shoppingCartDetails",
      data(){
        return{
          // 收货地址
          customerAddress: null,
          addShow1:null,
          addShow2:null,
          //提交订单的集合
          resultList:[],
          orderPaper:"",
          orderPaperShow: false,
          result: [],
          // 总价
          totalPrice:0,
          //购物车提交订单参数
          orderList:{
            resultList:[],
            province:'',
            city:'',
            county:'',
            addressDetail:'',
            name:'',
            tel:'',
            orderPaper:'',
          },
          //返回的订单表id
          list:[],

        }
      },
      //页面加载前渲染
      created() {
        this.resultList = JSON.parse(sessionStorage.getItem('resultList'));
        console.log(JSON.stringify(this.resultList))
        this.resultList.forEach(item => {
          this.totalPrice = this.totalPrice + (item.labelPrice*item.productNumber) + item.labelFreight;
        });
        //收货地址
        this.getCustomerAddrByCustomerId();
      },
      methods:{
        //返回上一层
        toBack(){
          this.$router.go(-1);
        },
        // 进入地址列表
        toAddress(){
          this.$router.push({path:"/my_address"});
        },
        // 查询默认的地址信息
        getCustomerAddrByCustomerId(){
          selectCustomerAddrByCustomerId().then((res) =>{
            if(res.data.code == 200){
              // console.log("收货地址:"+JSON.stringify(res.data))
              this.customerAddress = res.data.data;
              this.addShow1 = false;
              this.addShow2 = true;
            }else{
              this.addShow1 = true;
              this.addShow2 = false;
            }
          })
        },
        //开发票
        toggle() {
          if(this.orderPaperShow == false){
            this.orderPaperShow = true;
          }else{
            this.orderPaperShow = false;
          }
        },
        //提交订单
        tiJiao(){
          // console.log(JSON.stringify(this.resultList.supplierId))

          this.orderList.resultList = this.resultList;
          this.orderList.province = this.customerAddress.province;
          this.orderList.city = this.customerAddress.city;
          this.orderList.county = this.customerAddress.county;
          this.orderList.addressDetail = this.customerAddress.addressDetail;
          this.orderList.name = this.customerAddress.name;
          this.orderList.tel = this.customerAddress.tel;
          this.orderList.orderPaper = this.orderPaper;
          addOrder(this.orderList).then((res)=>{
            console.log(res);
            if(res.data.code==200){
              this.list = res.data.data;
              this.$router.push({
                path:'/shoppingPay',
                query:{
                  list:this.list,
                  totalPrice:this.totalPrice
                }});
            }else {
              Toast({
                message: "提交订单失败",
                position: "top",
              });
            }
          })
        },

      },

    }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 45px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 12px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .OrderDetails-demo{
    padding: 0.5rem;
  }
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }
</style>
